<template>
  <view class="page">
    <u-navbar autoBack fixed placeholder bgColor="#ffffff">
      <template #left>
        <view class="navBar">
          <u-icon name="arrow-left" color="#000" size="18"></u-icon>
          <text class="nav_title">评论</text>
        </view>
      </template>
    </u-navbar>
    <view class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }" >
      <u-empty
        v-if="!commentList.length"
        mode="data"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
      ></u-empty>
      <view v-else class="comments" v-for="(item, index) in commentList" :key="index">
        <u-avatar :src="item.createUserInfo.avatar" size="30"></u-avatar>
        <view class="right">
          <view class="name-box">
            <text class="name">{{item.createUserInfo.nickName}}</text>
            <text class="right">评论了</text>
          </view>
          <view class="time">{{commentTime(item.createTime)}}</view>
          <view class="content-text">{{item.content}}</view>
          <view class="strategy">
            <image :src="strategyDetail.img"></image>
            <text>{{strategyDetail.title}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getCommentList, getStrategyDetail} from "@/api/introduction";
import moment from "moment";

export default {
  onLoad(options) {
    this.getCommentList(options.strategyId)
  },
  data() {
    return {
      commentList: [],
      strategyDetail: ''
    };
  },
  computed: {
    navBarHeight() {
      const platform = uni.getSystemInfoSync().platform
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
      let navHeight = 0
      if (['ios', 'devtools'].includes(platform)) {
        navHeight = 44
      } else {
        navHeight = 48
      }
      return navHeight + statusBarHeight
    },
  },
  methods: {
    async getCommentList(strategyId) {
      const { code, data, msg } = await getCommentList({
        aimId: strategyId
      })
      if (code !== 200) {
        this.$modal.msgError(msg)
        return
      }
      this.commentList = data.rows
      await this.getStrategyDetail(strategyId)
    },
    async getStrategyDetail(strategyId) {
      const { code, data, msg } = await getStrategyDetail(strategyId)
      if (code !== 200) {
        this.$modal.msgError(msg)
        return
      }
      this.strategyDetail = data
    },
    commentTime(time) {
      return moment(time).format('YYYY-MM-DD')
    }
  }
}
</script>

<style lang="scss">
.page {
  width: 100vw;
  height: 100vh;
  .navBar {
    display: flex;
    align-items: center;
    .nav_title {
      font-size: 36rpx;
      font-weight: 400;
      color: #000000;
      margin-left: 8rpx;
    }
  }
  .content {
    background-color: #F3F3F3;
    .comments {
      display: flex;
      align-items: start;
      border-bottom: 1px solid #F3F3F3;
      padding: 20px 10px;
      background-color: #FFFFFF;
      .right {
        display: flex;
        flex-direction: column;
        justify-content: start;
        margin-left: 10px;
        width: 100%;
        .name-box {
          display: flex;
          align-items: center;
          .name {
            font-family: HarmonyOS_Sans_SC_Medium;
            font-size: 14px;
            color: #000000;
            line-height: 20px;
            text-align: left;
            font-style: normal;
          }
          .right {
            font-family: HarmonyOS_Sans_SC;
            font-size: 14px;
            color: #999999;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            margin-left: 10px;
          }
        }
        .time {
          font-family: HarmonyOS_Sans_SC;
          font-size: 12px;
          color: #999999;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
        .content-text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          margin: 10px 0;
        }
        .strategy {
          height: 64px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: start;
          background: #F3F3F3;
          image {
            width: 56px;
            height: 56px;
            margin-left: 5px;
          }
          text {
            font-family: HarmonyOS_Sans_SC_Medium;
            font-size: 14px;
            color: #333333;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
